$dark-bg-color: #333333;
$dark-text-color: #b0b0a4;
$dark-text-hover-color: #ffffff;
$orange-color: rgb(255, 103, 0);

html,
body {
  padding: 0;
  margin: 0;

  height: 100%;
  width: 100%;
  min-width: calc(76.625rem);

  background-color: #f5f5f5;
}

@mixin clear-ul-style {
  list-style-type: disc;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
  padding-inline-start: 0;
  unicode-bidi: isolate;
  list-style: none;
}

@mixin img-item($size) {
  width: $size;
  height: $size;

  object-fit: cover;

  img {
    width: 100%;
    height: 100%;
  }
}

@font-face {
  font-family: "layui-icon";
  src: url("../assets/layui/font/iconfont.eot?v=256");
  src: url("../assets/layui/font/iconfont.eot?v=256#iefix")
      format("embedded-opentype"),
    url("../assets/layui/font/iconfont.woff2?v=256") format("woff2"),
    url("../assets/layui/font/iconfont.woff?v=256") format("woff"),
    url("../assets/layui/font/iconfont.ttf?v=256") format("truetype"),
    url("../assets/layui/font/iconfont.svg?v=256#layui-icon") format("svg");
}

@mixin element-box-shadow($second) {
  transition: box-shadow $second, transform $second;

  &:hover {
    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);

    transform: translateY(-2px);
  }
}

button {
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  outline: 0;
}

.btn {
  border: 0;
  padding: 1rem;
  border-radius: 8px;
  cursor: pointer;

  &.btn-primary {
    background-color: #ff6b0f;
    color: white;
    transition: background-color 0.3s;
  }
}
